<template>
  <div>
    <el-form label-position="top" label-width="80px" :model="formLabelAlign">
      <el-form-item label="工程设备">
        <div class="block">
          <el-cascader v-model="selectedIds" :options="empData"
            :props="{ value: 'id', label: 'name', expandTrigger: 'hover' }" @change="handleChange">
          </el-cascader>
        </div>
      </el-form-item>
      <el-form-item label="报修原因">
        <el-input type="textarea" :rows="4" v-model="form.bill_why">
        </el-input>
      </el-form-item>
      <el-button type="success" @click="toSubmit" :loading="submitting">提交</el-button>
    </el-form>
  </div>
</template>

<script>
import { get, post } from '@/utils/request'
export default {
  data() {
    return {
      selectedIds: [],
      empData: [],
      submitting: false,
      form: {
        engineer_id: null,
        device_id: null,
        bill_why: '',
      },
      textarea: '',
    };
  },
  computed: {},
  methods: {
    handleChange(value) {
      if (value.length >= 2) {
        this.form.engineer_id = value[0]
        this.form.device_id = value[1]
      }
    },
    async getEmpData() {
      let res = await get('/dashboard/findEngineerDeviceTree');
      this.empData = res.data;
    },
    async toSubmit() {
      if (this.selectedIds.length < 2) {
        this.$message.warning('请选择工程和设备')
        return
      }
      if (!this.form.bill_why.trim()) {
        this.$message.warning('请输入报修原因')
        return
      }
      this.submitting = true
      let { data } = await post('/workorder/repairOrder', this.form)
      this.$message.success('提交成功')
      // 跳转到工单列表页
      this.$router.push({
        path: '/list',
        query: {
          forceRefresh: Date.now() // 添加时间戳强制刷新
        }
      })
      this.selectedIds = []
      this.form = {
        engineer_id: null,
        device_id: null,
        bill_why: '',
      }
    }
  },
  created() {
    this.getEmpData();
  },
  mounted() {

  },
};
</script>
<style scoped></style>